<template>
  <div class="app-container dashboard">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24" style="padding-left: 20px">
        <h2>数据统计仪表板</h2>
        <p class="dashboard-subtitle">学生作业提交情况统计分析</p>
      </el-col>
    </el-row>

    <!-- 筛选条件 -->
    <el-card class="filter-card" shadow="never">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
        <el-form-item label="日期范围" prop="dateRange">
          <el-date-picker
            v-model="dateRange"
            style="width: 280px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="班级" prop="className">
          <el-select v-model="queryParams.className" placeholder="请选择班级" clearable style="width: 220px">
            <el-option
              v-for="item in classOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学生" prop="studentName">
          <el-input
            v-model="queryParams.studentName"
            placeholder="请输入学生姓名"
            clearable
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="应打卡次数" prop="expectedDays" label-width="100px">
          <el-input-number
            v-model="queryParams.expectedDays"
            :min="1"
            :max="31"
            placeholder="应打卡次数"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 统计概览卡片 -->
    <el-row :gutter="20" class="statistics-overview" v-loading="loading">
      <el-col :span="6">
        <el-card class="overview-card gradient-blue">
          <div class="overview-item">
            <div class="overview-icon">
              <i class="el-icon-user-solid"></i>
            </div>
            <div class="overview-content">
              <div class="overview-number">{{ statisticsData.totalStudents }}</div>
              <div class="overview-label">总学生数</div>
              <div class="overview-trend" v-if="statisticsData.studentTrend">
                <i :class="statisticsData.studentTrend > 0 ? 'el-icon-top trend-up' : 'el-icon-bottom trend-down'"></i>
                <span>{{ Math.abs(statisticsData.studentTrend) }}%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="overview-card gradient-green">
          <div class="overview-item">
            <div class="overview-icon">
              <i class="el-icon-check"></i>
            </div>
            <div class="overview-content">
              <div class="overview-number">{{ statisticsData.submitRate }}%</div>
              <div class="overview-label">总体提交率</div>
              <div class="overview-trend" v-if="statisticsData.submitTrend">
                <i :class="statisticsData.submitTrend > 0 ? 'el-icon-top trend-up' : 'el-icon-bottom trend-down'"></i>
                <span>{{ Math.abs(statisticsData.submitTrend) }}%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="overview-card gradient-orange">
          <div class="overview-item">
            <div class="overview-icon">
              <i class="el-icon-time"></i>
            </div>
            <div class="overview-content">
              <div class="overview-number">{{ statisticsData.onTimeRate }}%</div>
              <div class="overview-label">按时提交率</div>
              <div class="overview-trend" v-if="statisticsData.onTimeTrend">
                <i :class="statisticsData.onTimeTrend > 0 ? 'el-icon-top trend-up' : 'el-icon-bottom trend-down'"></i>
                <span>{{ Math.abs(statisticsData.onTimeTrend) }}%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="overview-card gradient-red">
          <div class="overview-item">
            <div class="overview-icon">
              <i class="el-icon-warning-outline"></i>
            </div>
            <div class="overview-content">
              <div class="overview-number">{{ statisticsData.lateRate }}%</div>
              <div class="overview-label">迟交率</div>
              <div class="overview-trend" v-if="statisticsData.lateTrend">
                <i :class="statisticsData.lateTrend > 0 ? 'el-icon-top trend-up' : 'el-icon-bottom trend-down'"></i>
                <span>{{ Math.abs(statisticsData.lateTrend) }}%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button 
          type="success" 
          icon="el-icon-download" 
          size="mini" 
          @click="exportData"
          :loading="exportLoading"
          :disabled="tableData.length === 0"
        >
          导出Excel
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button 
          type="primary" 
          icon="el-icon-refresh" 
          size="mini" 
          @click="refreshData"
          :loading="loading"
        >
          刷新数据
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button 
          type="warning" 
          icon="el-icon-warning" 
          size="mini" 
          @click="showUnsubmittedOnly = !showUnsubmittedOnly"
        >
          {{ showUnsubmittedOnly ? '显示全部' : '仅显示未交' }}
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="handleQuery"></right-toolbar>
    </el-row>

    <!-- 统计表格 -->
    <el-card class="table-card" shadow="never">
      <div slot="header" class="table-header">
        <span class="table-title">
          <i class="el-icon-s-data"></i>
          学生作业提交详情统计
        </span>
        <div class="table-actions">
          <el-tooltip content="表格说明" placement="top">
            <el-button type="text" icon="el-icon-question" @click="showTableHelp = true"></el-button>
          </el-tooltip>
        </div>
      </div>
      
      <!-- 空数据提示 -->
      <div v-if="!loading && filteredTableData.length === 0" class="empty-data">
        <el-empty description="暂无数据" image-size="120">
          <el-button type="primary" @click="handleQuery">重新加载</el-button>
        </el-empty>
      </div>
      
      <el-table 
        v-else
        :data="filteredTableData" 
        border 
        stripe
        style="width: 100%" 
        v-loading="loading"
        element-loading-text="正在加载数据..."
        element-loading-spinner="el-icon-loading"
        :default-sort="{prop: 'totalRewardScore', order: 'descending'}"
        @sort-change="handleSortChange"
      >
        <el-table-column prop="序号" label="序号" width="60" align="center" fixed="left" />
        <el-table-column prop="姓名" label="姓名" width="100" align="center" fixed="left">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isTopPerformer" type="success" size="mini" style="margin-bottom: 4px;">优秀</el-tag>
            <div>{{ scope.row.姓名 }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="Name" label="英文名" width="120" align="center" fixed="left" />
        
        <!-- 动态生成日期列和对应的积分列 -->
        <template v-for="date in dateColumns">
          <!-- 日期提交状态列 -->
          <el-table-column
            :key="'status-' + date"
            :label="formatDateLabel(date)"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.dailyData && scope.row.dailyData[date]" class="daily-submit-cell">
                <div class="submit-status">
                  <el-tooltip :content="getSubmitTooltip(scope.row.dailyData[date])" placement="top">
                    <template v-if="scope.row.dailyData[date].submitted">
                      <span v-if="scope.row.dailyData[date].isLate" class="submit-icon-late-circle" title="迟交">⭕</span>
                      <i v-else class="el-icon-check submit-icon-success"></i>
                    </template>
                    <i v-else class="el-icon-close submit-icon-fail"></i>
                  </el-tooltip>
                </div>
              </div>
              <span v-else class="no-data">-</span>
            </template>
          </el-table-column>
          
          <!-- 对应日期的积分列 -->
          <el-table-column
            :key="'reward-' + date"
            :label="'积分'"
            width="60"
            align="center"
          >
            <template slot-scope="scope">
              <div 
                class="daily-reward"
                :class="getRewardClass(scope.row.rewardData && scope.row.rewardData[date])"
              >
                {{ (scope.row.rewardData && scope.row.rewardData[date]) || 0 }}
              </div>
            </template>
          </el-table-column>
        </template>
        
        <!-- 总积分列 -->
        <el-table-column label="总积分" width="90" align="center" sortable="custom" prop="totalRewardScore" fixed="right">
          <template slot-scope="scope">
            <div 
              class="reward-total"
              :class="getTotalRewardClass(scope.row.totalRewardScore)"
            >
              <i class="el-icon-trophy" v-if="scope.row.totalRewardScore > 50"></i>
              {{ scope.row.totalRewardScore || 0 }}
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="提交统计" width="120" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="submit-stats">
              <div class="stat-item success">
                <i class="el-icon-check"></i>
                <span>{{ scope.row.submittedCount || 0 }}</span>
              </div>
              <div class="stat-item danger">
                <i class="el-icon-close"></i>
                <span>{{ scope.row.unsubmittedCount || 0 }}</span>
              </div>
              <div class="stat-item warning">
                <i class="el-icon-time"></i>
                <span>{{ scope.row.lateCount || 0 }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="提交率" width="80" align="center" sortable="custom" prop="submitRate" fixed="right">
          <template slot-scope="scope">
            <el-progress 
              :percentage="getSubmitRate(scope.row)" 
              :color="getProgressColor(getSubmitRate(scope.row))"
              :stroke-width="8"
              :show-text="false"
            ></el-progress>
            <div class="rate-text">{{ getSubmitRate(scope.row) }}%</div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 表格说明对话框 -->
    <el-dialog title="表格说明" :visible.sync="showTableHelp" width="500px">
      <div class="help-content">
        <h4>图标说明：</h4>
        <ul>
          <li><i class="el-icon-check" style="color: #67c23a;"></i> 绿色对勾：按时提交</li>
          <li><span style="color: #e6a23c; font-weight: bold;">○</span> 橙色圆圈：迟交但已提交</li>
          <li><i class="el-icon-close" style="color: #f56c6c;"></i> 红色叉号：未提交</li>
        </ul>
        <h4>积分规则：</h4>
        <ul>
          <li>按时提交：+2分</li>
          <li>迟交提交：+1分</li>
          <li>未提交：0分</li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSubmitStatistics, getStatisticsOverview, getClassOptions, exportStatistics, getDailySubmitDetail } from "@/api/manage/statistics"

export default {
  name: "Dashboard",
  data() {
    return {
      // 查询参数
      queryParams: {
        className: null,
        studentName: null,
        expectedDays: 5
      },
      dateRange: [],
      showSearch: true,
      loading: false,
      exportLoading: false,
      showTableHelp: false,
      showUnsubmittedOnly: false,
      
      // 班级选项
      classOptions: [],
      
      // 统计数据
      statisticsData: {
        totalStudents: 0,
        submitRate: 0,
        onTimeRate: 0,
        lateRate: 0,
        studentTrend: 0,
        submitTrend: 0,
        onTimeTrend: 0,
        lateTrend: 0
      },
      
      // 日期列
      dateColumns: [],
      
      // 表格数据
      tableData: [],
      
      // 排序参数
      sortParams: {
        prop: 'totalRewardScore',
        order: 'descending'
      }
    }
  },
  computed: {
    filteredTableData() {
      let data = this.tableData
      
      // 根据学生姓名筛选
      if (this.queryParams.studentName) {
        data = data.filter(item => 
          item.姓名.includes(this.queryParams.studentName)
        )
      }
      
      // 仅显示未交作业的学生
      if (this.showUnsubmittedOnly) {
        data = data.filter(item => 
          (item.unsubmittedCount || 0) > 0
        )
      }
      
      return data
    }
  },
  created() {
    this.getClassList()
    this.initDefaultDateRange()
    this.getStatisticsData()
  },
  methods: {
    /** 初始化默认日期范围（最近7天） */
    initDefaultDateRange() {
      const endDate = new Date()
      const startDate = new Date()
      startDate.setDate(startDate.getDate() - 7)
      
      this.dateRange = [
        this.formatDate(startDate),
        this.formatDate(endDate)
      ]
    },
    
    /** 格式化日期 */
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    
    /** 获取班级列表 */
    getClassList() {
      getClassOptions().then(response => {
        const data = response.data || []
        this.classOptions = data.map(item => ({
          value: item.value,
          label: item.label
        }))
      }).catch(error => {
        console.error('获取班级列表失败:', error)
        this.$message.error('获取班级列表失败')
      })
    },
    
    /** 获取统计数据 */
    getStatisticsData() {
      this.loading = true
      
      const params = {
        classCode: this.queryParams.className,
        expectedDays: this.queryParams.expectedDays
      }
      
      if (this.dateRange && this.dateRange.length === 2) {
        params.startDate = this.dateRange[0]
        params.endDate = this.dateRange[1]
      }
      
      this.getStatisticsOverview(params)
      this.getDailySubmitDetail(params)
    },
    
    /** 获取统计概览数据 */
    getStatisticsOverview(params) {
      getStatisticsOverview(params).then(response => {
        const data = response.data || {}
        this.statisticsData = {
          totalStudents: data.totalStudents || 0,
          submitRate: data.submitRate || 0,
          onTimeRate: data.onTimeRate || 0,
          lateRate: data.lateRate || 0,
          studentTrend: data.studentTrend || 0,
          submitTrend: data.submitTrend || 0,
          onTimeTrend: data.onTimeTrend || 0,
          lateTrend: data.lateTrend || 0
        }
      }).catch(error => {
        console.error('获取统计概览失败:', error)
        this.$message.error('获取统计概览失败')
      })
    },
    
    /** 获取学生每日提交详情 */
    getDailySubmitDetail(params) {
      getDailySubmitDetail(params).then(response => {
        const data = response.data || {}
        
        this.dateColumns = data.dateColumns || []
        
        const studentData = data.studentData || []
        this.tableData = studentData.map((student, index) => {
          const totalRewardScore = student.totalRewardScore || 0
          const submittedCount = student.totalSubmits || 0
          const lateCount = student.lateSubmits || 0
          const expectedDays = student.expectedDays || this.queryParams.expectedDays || 5
          const unsubmittedCount = Math.max(0, expectedDays - submittedCount)
          const attendanceRate = student.attendanceRate || 0
          
          return {
            序号: index + 1,
            姓名: student.studentName,
            Name: student.englishName,
            dailyData: student.dailyData,
            rewardData: student.rewardData,
            totalRewardScore: totalRewardScore,
            submittedCount: submittedCount,
            lateCount: lateCount,
            unsubmittedCount: unsubmittedCount,
            expectedDays: expectedDays,
            attendanceRate: attendanceRate,
            isTopPerformer: totalRewardScore >= 50 // 总积分50分以上为优秀学生
          }
        })
        
        this.sortTableData()
        this.loading = false
      }).catch(error => {
        console.error('获取学生每日提交详情失败:', error)
        this.$message.error('获取学生每日提交详情失败')
        this.loading = false
      })
    },
    
    /** 表格排序 */
    handleSortChange({ prop, order }) {
      this.sortParams = { prop, order }
      this.sortTableData()
    },
    
    /** 排序表格数据 */
    sortTableData() {
      if (!this.sortParams.prop) return
      
      this.tableData.sort((a, b) => {
        const aVal = a[this.sortParams.prop] || 0
        const bVal = b[this.sortParams.prop] || 0
        
        if (this.sortParams.order === 'ascending') {
          return aVal - bVal
        } else {
          return bVal - aVal
        }
      })
    },
    
    /** 格式化日期标签 */
    formatDateLabel(date) {
      if (date && date.length >= 10) {
        const month = date.substring(5, 7)
        const day = date.substring(8, 10)
        return `${month}.${day}`
      }
      return date
    },
    
    /** 获取提交图标类名 */
    getSubmitIconClass(dailyData) {
      if (dailyData.submitted) {
        return dailyData.isLate ? 'el-icon-check submit-icon-late' : 'el-icon-check submit-icon-success'
      }
      return 'el-icon-close submit-icon-fail'
    },
    
    /** 获取提交图标样式 */
    getSubmitIconStyle(dailyData) {
      if (dailyData.submitted) {
        return dailyData.isLate ? { color: '#e6a23c', fontSize: '16px' } : { color: '#67c23a', fontSize: '16px' }
      }
      return { color: '#f56c6c', fontSize: '16px' }
    },
    
    /** 获取提交提示信息 */
    getSubmitTooltip(dailyData) {
      if (dailyData.submitted) {
        return dailyData.isLate ? '迟交已提交' : '按时提交'
      }
      return '未提交'
    },
    
    /** 获取奖励积分样式类名 */
    getRewardClass(reward) {
      const score = reward || 0
      if (score === 0) return 'reward-zero'
      if (score === 1) return 'reward-low'
      if (score === 2) return 'reward-high'
      return 'reward-normal'
    },
    
    /** 获取总积分样式类名 */
    getTotalRewardClass(totalScore) {
      const score = totalScore || 0
      if (score === 0) return 'total-zero'
      if (score >= 50) return 'total-excellent'
      if (score >= 30) return 'total-good'
      return 'total-normal'
    },
    
    /** 获取提交率 */
    getSubmitRate(row) {
      // 使用后端计算的打卡率，如果没有则使用原来的计算方式
      if (row.attendanceRate !== undefined) {
        return Math.round(row.attendanceRate)
      }
      
      // 兼容旧的计算方式
      const expectedDays = row.expectedDays || this.queryParams.expectedDays || 5
      if (expectedDays === 0) return 0
      return Math.round((row.submittedCount / expectedDays) * 100)
    },
    
    /** 获取进度条颜色 */
    getProgressColor(rate) {
      if (rate >= 90) return '#67c23a'
      if (rate >= 70) return '#e6a23c'
      return '#f56c6c'
    },
    
    /** 搜索 */
    handleQuery() {
      this.getStatisticsData()
    },
    
    /** 重置 */
    resetQuery() {
      this.dateRange = []
      this.queryParams = {
        className: null,
        studentName: null,
        expectedDays: 5
      }
      this.showUnsubmittedOnly = false
      this.initDefaultDateRange()
      this.getStatisticsData()
    },
    
    /** 刷新数据 */
    refreshData() {
      this.getStatisticsData()
      this.$message.success('数据已刷新')
    },
    
    /** 导出数据 */
    exportData() {
      if (this.filteredTableData.length === 0) {
        this.$message.warning('暂无数据可导出')
        return
      }
      
      this.exportLoading = true
      
      const params = {
        ...this.queryParams
      }

      // 后端需要 classCode，这里将选择的班级值映射为 classCode
      // 并去掉不需要的 className 字段
      if (this.queryParams && this.queryParams.className) {
        params.classCode = this.queryParams.className
        delete params.className
      }
      
      if (this.dateRange && this.dateRange.length === 2) {
        params.startDate = this.dateRange[0]
        params.endDate = this.dateRange[1]
      }
      
      // 生成文件名
      const now = new Date()
      const dateStr = now.getFullYear() + 
        String(now.getMonth() + 1).padStart(2, '0') + 
        String(now.getDate()).padStart(2, '0') + '_' +
        String(now.getHours()).padStart(2, '0') + 
        String(now.getMinutes()).padStart(2, '0') + 
        String(now.getSeconds()).padStart(2, '0')
      
      const filename = `学生作业提交统计_${dateStr}.xlsx`
      
      this.download('/eduManage/submit/statistics/export', params, filename).finally(() => {
        this.exportLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard {
  .dashboard-subtitle {
    color: #909399;
    margin-top: -10px;
    margin-bottom: 20px;
  }

  .filter-card {
    margin-bottom: 20px;
    
    .el-form {
      margin-bottom: 0;
    }
  }

  .statistics-overview {
    margin-bottom: 20px;
    
    .overview-card {
      border: none;
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      }
      
      &.gradient-blue {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
      }
      
      &.gradient-green {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
      }
      
      &.gradient-orange {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: white;
      }
      
      &.gradient-red {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        color: white;
      }
      
      .overview-item {
        display: flex;
        align-items: center;
        padding: 20px;
        
        .overview-icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          background: rgba(255, 255, 255, 0.2);
          
          i {
            font-size: 28px;
            color: white;
          }
        }
        
        .overview-content {
          flex: 1;
          
          .overview-number {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 5px;
            line-height: 1;
          }
          
          .overview-label {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 5px;
          }
          
          .overview-trend {
            font-size: 12px;
            opacity: 0.8;
            
            .trend-up {
              color: #67c23a;
            }
            
            .trend-down {
              color: #f56c6c;
            }
          }
        }
      }
    }
  }

  .table-card {
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .table-title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
        
        i {
          margin-right: 8px;
          color: #409eff;
        }
      }
    }
    
    .empty-data {
      padding: 60px 0;
      text-align: center;
    }
    
    .daily-submit-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      
      .submit-status {
        display: flex;
        align-items: center;
        gap: 4px;

        .submit-icon-success {
          color: #67c23a;
          font-size: 16px;
        }

        .submit-icon-fail {
          color: #f56c6c;
          font-size: 16px;
        }

        .submit-icon-late-circle {
          color: #e6a23c;
          font-size: 16px;
          line-height: 1;
          display: inline-block;
        }
      }
    }
    
    .daily-reward {
      font-size: 12px;
      font-weight: bold;
      padding: 2px 6px;
      border-radius: 3px;
      
      &.reward-zero {
        color: #c0c4cc;
        background-color: #f5f7fa;
        border: 1px solid #e4e7ed;
      }
      
      &.reward-low {
        color: #e6a23c;
        background-color: #fdf6ec;
        border: 1px solid #f5dab1;
      }
      
      &.reward-high {
        color: #67c23a;
        background-color: #f0f9ff;
        border: 1px solid #b3d8ff;
      }
    }
    
    .reward-total {
      font-size: 14px;
      font-weight: bold;
      padding: 4px 8px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      
      &.total-zero {
        color: #909399;
        background-color: #f4f4f5;
        border: 1px solid #d3d4d6;
      }
      
      &.total-normal {
        color: #409eff;
        background-color: #ecf5ff;
        border: 1px solid #b3d8ff;
      }
      
      &.total-good {
        color: #e6a23c;
        background-color: #fdf6ec;
        border: 1px solid #f5dab1;
      }
      
      &.total-excellent {
        color: #67c23a;
        background-color: #f0f9ff;
        border: 1px solid #b3d8ff;
        
        .el-icon-trophy {
          color: #f7ba2a;
        }
      }
    }
    
    .submit-stats {
      display: flex;
      flex-direction: column;
      gap: 4px;
      
      .stat-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        
        &.success {
          color: #67c23a;
        }
        
        &.danger {
          color: #f56c6c;
        }
        
        &.warning {
          color: #e6a23c;
        }
      }
    }
    
    .rate-text {
      font-size: 12px;
      margin-top: 4px;
      text-align: center;
    }
    
    .no-data {
      color: #c0c4cc;
      font-size: 14px;
    }
  }

  .help-content {
    h4 {
      color: #303133;
      margin-bottom: 10px;
    }
    
    ul {
      margin: 0;
      padding-left: 20px;
      
      li {
        margin-bottom: 8px;
        line-height: 1.5;
        
        .late-indicator {
          background-color: #e6a23c;
          color: white;
          font-size: 10px;
          padding: 1px 4px;
          border-radius: 2px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>